<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover" />
		<title>安卓手机图片缩放动画scale模糊</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			html,
			body {
				width: 100%;
				height: 100%;
				font-size: 16px;
				color: #fff;
				background-color: rgb(51, 51, 51);
			}

			.wrapper {
				height: 10rem;
				width: 10rem;
				border: 1px solid #000000;
				overflow: auto;
				position: relative;

			}

			.d {
				perspective: 1000px;
			}

			img {
				position: absolute;
				width: 10rem;
				height: 10rem;
				top: calc(50% - 5rem);
				left: calc(50% - 5rem);
				z-index: 5;
				transform: translateZ(10px) scale(0);
				opacity: 0;
				animation: fire1 2s ease infinite;
			}

			@keyframes fire1 {
				0% {
					transform: translateZ(10px) scale(0);
					opacity: 0;
				}

				80% {
					transform: translateZ(10px) scale(1);
					opacity: 1;
				}

				100% {
					transform: translateZ(10px) scale(1);
					opacity: 0;
				}
			}
		</style>
	</head>
	<body>
		<h3>请使用安卓手机查看效果，苹果下方效果是一致的</h3>
		<p>不清晰版</p>
		<div class="wrapper">
			<img src="./fireworks.png" />
		</div>
		<h1>-----------</h1>
		<p>清晰版</p>
		<div class="wrapper d">
			<img src="./fireworks.png" />
		</div>
	</body>
</html>
